<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
    
        .header{
            margin-left: auto;
            margin-right: auto;

            width: 100%;
            height: 60px;
            background-color:#1ABEBF;

            background-image: url("images/logo.png");


            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: center;
        }

       
        .nav{
            background-color:#EFEFEF;
            height: 50px;
        }
        .nav-wrap{
            width: 1000px;
            height: 50px;
            border: none;
            /* 在nav里居中 */
            margin-left: auto;
            margin-right: auto;

            /* 为写left和right设置相对定位 */
            position:relative;
            /* background-color:yellow; */
        }

        .location,.user,.center{
            position: absolute;
            top: 0;
            line-height: 50px;
            height: 50px;
        }
        .location{
            left: 14px;
        }
        .img{
            margin-left:auto;
            margin-right: auto;  
        }

      
        .user{

            right: 0;
        }
        .images{
            margin-left:auto;
            margin-right: auto;
        }


        .center{
            margin-left: auto;
            margin-right: auto;
   
            right:290px;
          
            
                     
        }
        .center>span{
            padding-right: 50px;

        }

        .all{
            margin-left: auto;
            margin-right: auto;
             /* background:pink;  */
            position: relative;
            width: 1000px;
            height:1290px;
        }


        .middle{
            /*background-color:red;*/
            /* margin-top:14px; */
            /* left:0; */
            width:998px;
            line-height:60px;
            font-size: 18px;
            /* left: 0;  */
            margin-top: 15px;
            /* margin-left: 460px; */
            /* background-color:blue; */
            
            margin-left: auto;
            margin-right: auto;
            padding-left: 25px;
        

        }

        .container{

            width:1000px;
            height:180px;

            margin-left: auto;
            margin-right: auto;

            /* margin-left:460px; */
             background-color:#EBEBEB; 
     
        }

        ul{
            list-style-type:none;
            overflow: hidden;
            line-height: 40px;
          
        }

        li{
            float:left;
            margin-right: 30px;
            left:2px;
            font-size: 16px;

        }
        .category{
            color:#18BEBE;
            padding-left: 18px;
        }

        .floor:hover{
            border:1px solid orangered;            
        }
        .type{
            color:#18BEBE;
            padding-left: 18px;
        }

        .material{
            color:#18BEBE;
            padding-left: 18px;
        }

        .wood:hover{
            border:1px solid orangered; 
        }

        .brand{
            color:#18BEBE;
            padding-left: 18px;
        }
        .shengxaing:hover{
            border:1px solid orangered; 
        }




        .content{
            position: relative;
            width:100%;
            height: 50px;

            /* line-height:50px; */
            margin-left: auto;
            margin-right: auto;
 
        }
        .content-wrap{
            position: absolute;
            width: 1000px;
            height: 50px;
            left:0px;
            /* line-height:50px; */
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            margin-top:20px;
            background-color:#EBEBEB; 

        }

        .left,.right,.search{
            position: absolute;
            line-height: 50px;
            height:50px;
            margin-left: auto;
            margin-right: auto;
        }



        .left>span{
            padding-right: 8px;
            box-sizing: border-box;
        }

        .right{
            right: 30px;  
            right: 0;
        }


        .right>span{
            color:#18BEBE;
            font-size: 16px;

        }
        .search{
            width: 504px;
            height: 50px;
            border: none;
            left:0;
            position: relative;
            /* background-color:blue; */
        }

        .con{
            width: 405px;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            position: absolute;
        }

        text{
            position: absolute;
            width: 300px;
            line-height: 1200px;
            height:100px;
            border:none;
            outline: none;
            left:100px;
            border:1px solid #333;
            top:20%;      
        }
        .fangdajing{
            position: absolute;
            left:238px;
            top:36%;    
        }
        .search button{
            position: absolute;
            border: none;
            outline: none;
            left: 252px;
            top:36%;


        }

        .choise{
            width: 1004px;
            margin-top:55px;
            /* 居中 */
            margin-left: auto;
            margin-right: auto;
            /* background-color:red; */
            overflow: hidden;  
        }

        .choise div{
            width:240px;
            height:380px;
            border:none;
            background-color:#EBEBEB; 
            /* border:2px solid #333; */
            float:left;
            position: relative;   
        }

        .choise div:not(:last-child){
            margin-right: 13.333px;
        }
        

        .choise div img{
            position: absolute;
            left:15px;
            top:20px;
        }


        .first,.second,.third,.fourth{
            position: absolute;
            top:235px;
            line-height: 30px;

        }
        .one,.two,.three,.four{
            font-size: 18px;
        }

        .first:hover{
            color:tomato;
        }

        .one,.two,.three,.four{
            color:#18BEBE;

        }


        .choice{
            width: 1004px;
            margin-top:55px;
            /* 居中 */
            margin-left: auto;
            margin-right: auto;
            /* background-color:red; */
            overflow: hidden;  
        }

        .choice div{
            width:240px;
            height:380px;
            border:none;
            background-color:#EBEBEB; 
            /* border:2px solid #333; */
            float:left;
            position: relative;   
        }

        .choice div:not(:last-child){
            margin-right: 13.333px;
        }
        

        .choice div img{
            position: absolute;
            left:15px;
            top:20px;
        }


        .fivth,.sixth,.seventh,.eighth{
            position: absolute;
            top:235px;
            line-height: 30px;

        }
        .five,.six,.seven,.eight{
            font-size: 18px;
            color:#18BEBE;
        }

        .page{
            width:1000px;
            margin-left: auto;
            margin-right:auto;
            height:40px;
            text-align: center;
            position: relative;
        }
        .onepage{
            width:80px;
            height:30px;
            background-color:#EBEBEB;
            border:none;
            position: absolute;
            left:0;
            top:17%;
        }
        .number{
            position: absolute;
            left:125px;
            top:26%;
        }
        .number>span{
            padding-right:20px;
            
        }

        .twopage{
            width:80px;
            height:30px;
            background-color:#EBEBEB;
            border:none;
            position: absolute;
            left:300px;
            top:17%;
            
        }
        .numbertwo:hover{
            color:orangered;
            text-decoration: underline;
        }

        .threenumber{
            position: absolute;
            top:26%;
            left:400px;
        }

        .case{
            width:20px;
            height:20px;
            border:1px solid #333;
            top:26%;
        }

        .threepage{
            position: absolute;
            width:80px;
            height:30px;
            background-color:tomato;
            color:white;
            left:580px;
            top:17%;
            border:none;

        }


        .need{
            width:1000px;
            margin-left:auto;
            margin-right:auto;
            height:150px;
            /* background-color: red; */
            position: relative;
        }

        .code{
            left:0;
            margin-top:40px;
        }

        .character{
            position: absolute;
            left:100px;
            width:450px;
            /* background:green; */
            margin-top:-84px;
            line-height: 20px;

        }

        .characterone{
            color:#18BEBE;
            font-size: 20px;
        }
        .character>span{
            line-height: 28px;
        }


        .bottom{
            width:100%;
            background-color:#515151;
            height:200px;
        }
        .bottom-wrap{
            width:1000px;
            margin-left: auto;
            margin-right: auto;
            background-color: green;
            position: relative;
            color:#B1B1B1;
        }

        .bottom-left{
            position: absolute;
            width: 400px;
            height:100%;
        }

        .logo{
            position: absolute;
            margin-top: 20px;
        }

        .question{
            line-height: 20px;
            font-size: 10px;
            margin-top: 55px;
        }


       .health{
            font-size: 15px;
            font:bolder;
        }



        .us{
            width:300px;
            height: 100%;
            position: absolute;
            left:450px;
        }

        .contact{
            line-height: 35px;
            position: absolute;
            margin-top: 35px;
            left:20px;
            font-size: 10px;
        }

        .copyright{
            line-height: 35px;
            position: absolute;
            margin-top: 35px;
            left:600px;
            font-size: 10px;
            
        }

        .shop{
            width:300px;
            position: absolute;
            left:750px;
        }


        .shopname{
            margin-top: 35px;
            font-size: 10px;
            line-height: 35px;

        }


        .line{
            width:1000px;
            margin-left: auto;
            margin-right: auto;
            position: absolute;
            margin-top: 150px;
            border-bottom: 1px solid #333;
        }

        .last{
            width:1000px;
            margin-left: auto;
            margin-right: auto;
            position: absolute;
            margin-top:15px;
        }

        .last-left{
            position: absolute;
            left:0;
        }
        .last-right{
            position: absolute;
            right: 0;
        }


        

     


        

       


    </style>
</head>
<body>
        <div class="header"> </div>

        <div class="nav">
            <div class="nav-wrap">
                <div class="location">
                    <img class="img"  src="images/location.png" alt="">               
                    <span>深圳<切换></span>
                </div>
                <div class="user">
                    <img class="images" src="images/adm.png" alt="">
                    <span>个人中心</span>
                </div>
                <div class="center">
                    <span>首页</span>
                    <span>资讯</span>
                    <span>测评</span>
                    <span>商城</span>
                </div>
            </div>
        </div>

        <div class="middle">

            <span>首页</span>
            <span>></span>
            <span>预防装修污染</span>
            <span>></span>
            <span>材料库</span>
        </div>
    
        <div class="all">
            <div class="container">
                <div>
                   <ul>
                       <li class="category">类别</li>
                       <li>全部</li>
                       <li class="floor">地板</li>
                       <li>涂料</li>
                       <li>墙纸</li>
                       <li>瓷砖</li>
                       <li>粘胶剂</li>
                       <li>油漆</li>
                       <li>家具</li>
                       <li>板材</li>
                       <li>饰品</li>
                       <img src="images/indexSelect.png" alt="">
                   </ul>
               </div>
               <div>
                   <ul>
                       <li class="type">类型</li>   
                       <li>全部</li>
                   </ul>       
               </div>
               <div>
                   <ul>
                       <li class="material">材质</li>
                       <li>全部</li>
                       <li class="wood">实木</li>
                       <li>复合</li>
                       <li>强化</li>
                       <li>其他</li>
                   </ul>
               </div>
               <div>
                   <ul>
                       <li class="brand">品牌</li>
                       <li>全部</li>
                       <li class="shengxaing">圣象</li>
                       <li>大自然</li>
                       <li>生活家</li>
                       <li>北美风情</li>
                       <li>德尔</li>
                       <li>博典</li>
                       <li>船王</li>
                   </ul>
               </div>   
           </div>
       
       
           <div class="content">
               <div class="content-wrap">
                   <div class="left">
                       <span>发布时间</span>
                       <img class="down"  src="images/downicon.png" alt=""> 
       
                       <span>价格</span>
                       <img class="up" src="images/upicon.png" alt="">
       
                       <span>环保节能</span>
                       <img class="high" src="images/upicon.png" alt="">  
                   </div>
                   <div class="right">
                       <img class="wenhao" src="images/wenhao.png" alt="">   
                       <span>了解家具医生建材环保评级标准</span>  
                   </div>
                   <div class="search">
                       <div class="con">
                           <input type="text">
                           <img class="fangdajing" src="images/search.png" alt="">
                           <button>搜索</button>
                       </div>        
                   </div>
               </div>
           </div>
       
       
           <div class="choise">
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="first">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="one">&nbsp&nbsp环保评级：B(可以使用）</span>
                   </div>   
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="second">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="two">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="third">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="three">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="fourth">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="four">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
           </div>
       
           <div class="choice">
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="fivth">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="five">&nbsp&nbsp环保评级：B(可以使用）</span>
                   </div>   
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="sixth">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="six">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="seventh">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="seven">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
               <div>
                   <img src="images/data_image.png" alt="">
                   <div class="eighth">
                       <span>&nbsp&nbsp德尔</span>
                       <span>都市系列3001</span><br>
                       <span>&nbsp&nbsp木地板</span>
                       <span>-</span>
                       <span>复合地板</span><br>
                       <span>&nbsp&nbsp单价:</span>
                       <span>128元/m2</span><br>
                       <span class="eight">&nbsp&nbsp环保评级：B(可以使用）</span>
       
                   </div>
               </div>
       
           </div>

           <div class="page">
               <span><button class="onepage">上一页</button></span>
               <div class="number">
                <span>1 </span>
                <span class="numbertwo">2 </span>
                <span>3 </span>
                <span>4 </span>
                <span>5 </span>
               </div>
               <span><button class="twopage">下一页</button></span>
               <span class="threenumber">共有10页，去第<input  class="case"  type="text">页</span>
               <span><button class="threepage">确定</button></span>
           </div>

           <div>
               <div class="need">
                   <img class="code" src="images/small_weixin.png" alt="">
                   <div class="character">
                       <span class="characterone">建材检测  需求反馈</span><br>
                       <span>亲爱的用户，我们正在不断的完善和更新建材库</span><br>
                       <span>若没有找到您想要的材料信息，请将您想测的建材告诉我们</span>
                   </div>
               </div>
           </div>
    </div>
<div class="bottom">
    <div class="bottom-wrap">
       <div class="bottom-left">
           <img class="logo" src="images/footerLogo.png" alt=""><br>
           <div class="question">
            <span class="health">为室内环境健康把好每一关</span><br>
            <span>家居医生致力于中国人的家居健康问题，通过专业的技术研究</span><br>
            <span>和测评，倾力协助大众打造绿色、环保的人居生活环境。</span>
           </div>
        </div>

        <div class="us">
            <div class="contact">
                <span>关于我们</span><br>
                <span>联系我们</span><br>
                <span>加入我们</span><br>
            </div>
        </div>
        <div class="copyright">
            <div class="copy">
                <span>版权说明</span><br>
                <span>用户隐私</span><br>
                <span>免费申明</span><br>
            </div>
        </div>

        <div class="shop">
            <div class="shopname">
                <img src="images/weixin2.png" alt="">
                <span>官方微信</span><br>
                <img src="images/tianmao.png" alt="">
                <span>天猫旗舰店</span><br>
                <img src="images/shop.png" alt="">
                <span>有赞商城</span>
            </div>    
        </div>

        <div class="line">
            <div class="last">
                <span class="last-left">深圳建筑科学研究院股份有限公司</span>
                <span class="last-right">粤ICP备08011321号 @Copyright All Rights Reserved</span>
            </div>

        </div>
    </div>

   </div>
</div>
</div>

</body>
</html>